function createElement(tag, classNames) {
	let element = document.createElement(tag);
	element.setAttribute("class", classNames);
	return element;
}

/**
 * dom创建工具，未完成
 * @param {Object} tag
 * @param {Object} attributes
 * @param {Object} c
 */
function h(tag, attributes, c) {
	let e = document.createElement(tag);
	if (typeof(attributes) == 'object') {
		for (let key in attributes) {
			if (key) {
				e.setAttribute(key, attributes[key])
			}
		}
	}
	if (typeof(c) == 'string') {

	} else {
		e.appendChild(c.outerHTML);
	}
	return e;
}
class NodeTitle {
	constructor(txt) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "node-title");
		this.element.innerHTML = txt;
	}

	getElement() {
		return this.element;
	}
}

class NodeContent {
	constructor(txt) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "node-content");
		this.element.innerHTML = txt;
	}

	getElement() {
		return this.element;
	}

	appendChild(obj) {
		this.element.appendChild(ele.getElement());
	}
}

class NodeLine {
	constructor() {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "bottom-v-line");
	}

	getElement() {
		return this.element;
	}
}

class NodeArrow {
	constructor() {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "bottom-v-arrow");
	}

	getElement() {
		return this.element;
	}
}

class NodeAddBtn {
	constructor(flowNode) {
		this.flowNode = flowNode;
		this.addNodeTypeBtns = null;
		this.element = document.createElement("div");
		this.element.setAttribute("class", "add-node-btn");
		let addBtn = document.createElement("div");
		addBtn.setAttribute("class", "add-btn");
		addBtn.innerHTML = "+";
		addBtn.addEventListener('click', (e) => {
			this.addNodeTypeBtns.show();
		})
		this.element.appendChild(addBtn);

		//挂载添加按钮组
		this.addNodeTypeBtns = new AddNodeTypeBtns(this.flowNode);
		this.appendChild(this.addNodeTypeBtns)

	}

	appendChild(obj) {
		this.element.appendChild(obj.getElement());
	}

	setFlowNode(flowNode) {
		this.flowNode = flowNode;
	}

	getElement() {
		return this.element;
	}
}

class NodeContainer {
	constructor(name, type) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "flow-node-container ");
		this.titleElement = null;
		this.contentElement = null;
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	setTitle(titleElement) {
		this.title = titleElement;
		this.element.appendChild(titleElement.getElement());
	}

	setContent(contentElement) {
		this.contentElement = contentElement;
		this.element.appendChild(contentElement.getElement());
	}

	getElement() {
		return this.element;
	}
}



class FlowNode {
	constructor(name, type) {
		this.flowType = type;
		this.name = name;
		this.element = document.createElement("div");
		this.element.setAttribute("class", "flow-node " + type);
		this._createNodeContainer();
	}

	_createNodeContainer() {
		let flowNodeContainer = new NodeContainer(this.name, this.flowType);
		let nodeTitle = new NodeTitle(this.name);
		let nodeContent = new NodeContent("提交人：李飞飞");
		flowNodeContainer.appendChild(nodeTitle);
		flowNodeContainer.appendChild(nodeContent);
		this.appendChild(flowNodeContainer);

		if (this.flowType != "end") {
			let nodeLine = new NodeLine();
			let nodeAddBtn = new NodeAddBtn(this);
			let nodeArrow = new NodeArrow();
			this.appendChild(nodeLine);
			this.appendChild(nodeAddBtn);
			this.appendChild(nodeArrow);
			nodeAddBtn.setFlowNode(this);
		}
		this.element.appendChild(flowNodeContainer.getElement());
		this.flowNodeContainer = flowNodeContainer;
	}

	_createConditionNode() {
		let flowNodes = new flowNodes();

	}

	addNext(name, type) {
		let current = this.element;
		let parent = current.parentNode;
		let nextNode = current.nextElementSibling;
		console.log("type", type)
		let newFlowNode = null;
		if (type == "condition") {
			newFlowNode = new FlowNodeRoute();
		} else {
			newFlowNode = new FlowNode(name, type)
		}
		let newElement = newFlowNode.getElement();
		parent.insertBefore(newElement, nextNode);
	}

	getName() {
		return this.name;
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	getElement() {
		return this.element;
	}
}

class FlowNodes {
	constructor(route) {
		this.element = document.createElement("div");
		this.element.setAttribute("class", "flow-node branch");
		//如果是条件分支节点的流程节点则需要加一个顶部引导线
		if (route == "route") {
			let  topLineMask = createElement("div","top-line-mask");
			let topVline = createElement("div", "top-v-line");
			let bottomVarrow = createElement("div","bottom-v-arrow");
			this.element.appendChild(topLineMask)
			this.element.appendChild(topVline);
			this.element.appendChild(bottomVarrow);
		}
		let nodes = document.createElement("div");
		nodes.setAttribute("class", "nodes");
		this.nodes = nodes;
		this.element.appendChild(nodes);
		//如果是条件分支节点的流程节点则需要加一个底部补充线
		if (route == "route") {
			let bottomVline = createElement("div", "bottom-v-line");
			let bottomLineMask = createElement("div", "bottom-line-mask");
			
			this.element.appendChild(bottomVline);
			this.element.appendChild(bottomLineMask);
		}
	}

	addFlowNode(flowNode) {
		this.nodes.appendChild(flowNode.getElement());
	}

	getElement() {
		return this.element;
	}
}

class Branchs {
	constructor(arg) {
		this.element = createElement("div", "branchs");
		this.initNodeRoute();
	}

	initNodeRoute() {
		this.appendChild(this.createFlowNodes());
		this.appendChild(this.createFlowNodes());
	}

	createFlowNodes() {
		var rootNode = new FlowNodes("route");
		var conditionFlowNode = new FlowNode("条件分支", "condition");
		rootNode.addFlowNode(conditionFlowNode);
		var approvalFlowNode = new FlowNode("审批节点", "approval");
		rootNode.addFlowNode(approvalFlowNode)
		return rootNode;
	}

	addNodeRoute() {
		return this.appendChild(this.createFlowNodes())
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	getElement() {
		return this.element;
	}
}

class FlowNodeRoute extends FlowNode{
	constructor() {
		super("条件分支","branch");
		this.element = createElement("div", "flow-node route");
		this.branchsElement = null;
		//顶部线
		let topHline = createElement("div", "top-h-line");
		this.element.appendChild(topHline);
		//创建添加按钮
		this._createAddBtn();
		//创建分支容器
		this.branchs = new Branchs();
		this.element.appendChild(this.branchs.getElement());
		//创建尾部连接器和新增按钮
		this.element.appendChild(createElement("div", "bottom-h-line"));
		this.element.appendChild(createElement("div", "bottom-v-line"));

		let nodeAddBtn = new NodeAddBtn(this);
		this.appendChild(nodeAddBtn);
		this.element.appendChild(createElement("div", "bottom-v-arrow"));
	}

	appendChild(ele) {
		this.element.appendChild(ele.getElement());
	}

	_createAddBtn() {
		let addBtn = createElement("div", "add-branch");
		let addBranchInner = createElement("div", "add-branch-inner");
		let span = document.createElement("span");
		span.innerText = "＋ 添加条件分支";
		addBranchInner.appendChild(span)
		addBtn.addEventListener("click", (e) => {
			this.branchs.addNodeRoute()
		})
		addBtn.appendChild(addBranchInner);
		this.element.appendChild(addBtn)
	}

	getElement() {
		return this.element;
	}
}

class ApprovalNode extends FlowNode {
	constructor(name) {
		super(name)
	}
}

class AddNodeTypeBtns {
	constructor(flowNode) {
		this.flowNode = flowNode;
		this.addNodeTypesElements = document.createElement("div");
		this.addNodeTypesElements.setAttribute("class", "add-node-types");
		this.addNodeTypesElements.appendChild(this._createBtn("审批", "imgs/icon/审批人.png", (e) => {
			this.flowNode.addNext('审批', 'approval');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("抄送人", "imgs/icon/抄送人.png", (e) => {
			this.flowNode.addNext('抄送', 'cc');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("办理人", "imgs/icon/办理人.png", (e) => {
			this.flowNode.addNext('办理', 'handle');
			this.hide();
		}))
		this.addNodeTypesElements.appendChild(this._createBtn("条件分支", "imgs/icon/条件分支.png", (e) => {
			this.flowNode.addNext('条件分支', 'condition');
			this.hide();
		}))
	}

	getElement() {
		return this.addNodeTypesElements;
	}

	show() {
		this.addNodeTypesElements.style.display = "block";
	}

	hide() {
		this.addNodeTypesElements.style.display = "none";
	}

	_createBtn(typeName, iconSrc, clickEventHandle) {
		let nodeTypeWrap = this._createElement("div", "node-type-wrap");
		if (clickEventHandle) {
			nodeTypeWrap.addEventListener('click', clickEventHandle);
		}
		let nodeTypeIcon = this._createElement("div", "node-type-icon");
		let img = this._createElement("img");
		img.setAttribute("src", iconSrc);
		let nodeTypeName = this._createElement("div", "node-type-name");
		nodeTypeName.innerHTML = typeName;
		nodeTypeIcon.appendChild(img);

		let nodeType = this._createElement("div", "node-type");
		nodeType.appendChild(nodeTypeIcon);
		nodeType.appendChild(nodeTypeName);
		nodeTypeWrap.appendChild(nodeType);
		return nodeTypeWrap;
	}

	_createElement(tagName, className) {
		let tag = document.createElement(tagName);
		tag.setAttribute("class", className);
		return tag;
	}
}
